<template>
	<!-- 房屋认证 -->
	<view class="container">
		<view class="header">
			<view class="title">房屋认证</view>
			<view class="address">{{ roomName }}</view>
		</view>
		<view class="ray-cell-group">
			<view class="ray-cell">
				<view class="ray-cell__label tips">请填写以下必要信息，以便尽快完成审核！</view>
				<input type="text" class="ray-cell__value" @blur="checkcardNum(0, name)" placeholder="请输入姓名" maxlength="20" style="color: #66645D" v-model="name" />
			</view>
			<view class="ray-cell">
				<view @click="showCertificateModal()" class="ray-cell__label">
					<view>{{ cardType.name }}</view>
					<view class="icon_triangle"></view>
				</view>
				<input type="text" :placeholder="`请输入${cardType.name}号`" class="ray-cell__value" :maxlength="cardType.length" @blur="checkcardNum()" v-model="inputCardNum" />
			</view>
			<view class="ray-cell">
				<view class="ray-cell__label">手机号</view>
				<input class="ray-cell__value" type="number" disabled="disabled" v-model="userInfo.phonenumber" />
			</view>
		</view>

		<!-- <view class="select-button">
			<view class="select-button_title">该房产属于？</view>
			<view class="select-button_button">
				<view class="button" :class="{ active: type == '1' }" @click="type = '1'"><text>新房</text></view>
				<view class="button" :class="{ active: type == '2' }" @click="type = '2'"><text>二手房</text></view>
			</view>
		</view> -->

		<!-- 底部确认按钮 -->
		<view class="footer"><button class="foot-button" @click="sure()">确认</button></view>
		<!-- 显示证件类型弹窗 -->
		<view class="show-certificate-modal modal" v-if="showCertificate">
			<view v-bind:class="showCertificate ? 'show-certificate-modal-con is-show' : 'show-certificate-con is-hide'">
				<view class="show-certificate-modal-cont">
					<view class="title">
						<view class="text" style="font-size: 34rpx;color: #8A8C8D;font-weight: 400;">选择证件类型</view>
						<view class="close" @click="close" style="color: #8A8C8D;">
							<img src="https://mall-rongchuang.oss-cn-beijing.aliyuncs.com/association/store/2020/08/25/close.png" />
						</view>
					</view>
					<view class="certificate-cont">
						<view v-for="(item, index) in items" :key="index" class="certificate-item" @click="choosecertificate(item)">
							<view class="certificate-name">{{ item.name }}</view>
							<view class="caret"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<modal v-if="modalOpts.show" :msg="modalOpts.msg" @on-confirm="modalConfirm"></modal>
	</view>
</template>

<script>
import http, {customUrl} from '@/common/request.js';
import { mapState } from 'vuex';
import modal from '../components/modal.vue';
import { getCommonShareInfo } from '@/common/utils.js';
var filter_sfz = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}(\d|x|X)$/; //身份证
var filter_jg = /^[a-zA-Z0-9]{7,21}$/; //军官证
var filter_ga = /^[C]{1}([0-9]{10}|[0-9]{8})$/; //港澳通行证
var filter_hz = /^([a-zA-z]|[0-9]){5,17}$/; //护照
var filter_yyzz = /^[a-zA-Z0-9]{10,20}$/; //营业执照
export default {
	components: {
		modal
	},
	computed: {
		...mapState({ userInfo: state => state.userInfo })
	},
	data() {
		const items = [
			{
				name: '身份证',
				length: 18,
				cardNum: '1400000001'
			},

			{
				name: '军官证',
				length: 8,
				cardNum: '1400000002'
			},
			{
				name: '护照',
				length: 9,
				cardNum: '1400000003'
			},
			{
				name: '港澳通行证',
				length: 9,
				cardNum: '1400000006'
			},
			{
				name: '营业执照',
				length: 18,
				cardNum: '1400000012'
			},
			{
				name: '其他',
				length: 20,
				cardNum: '1400000098'
			}
		];
		return {
			cardType: items[0],
			name: '', //姓名
			inputCardNum: '', //证件号码
			type: '1', //(房产类型 1新房 2二手房)
			roomId: '',
			roomName: '',
			submitResult: false, // 提交结果
			showCertificate: false, // 显示证件类型弹窗
			modalOpts: {
				// 默认弹窗参数
				show: false,
				msg: '',
			},
			items
		};
	},

	onShareAppMessage() {
		return getCommonShareInfo();
	},

	async onLoad(options) {
		this.roomId = options.roomId;
		this.roomName = options.roomName;
	},
	methods: {
		/*确认按钮*/
		sure() {
			//对信息认证
			if (this.name == '' || this.inputCardNum == '') {
				uni.showToast({
					title: '请输入要提交的数据',
					icon: 'none'
				});
			} else {
				this.HouseAuth();
			}
		},
		//房屋认证接口
		async HouseAuth() {
			const {
				roomId,
				name,
				inputCardNum,
				cardType: {cardNum},
				type,
				userInfo: { phonenumber }
			} = this;
			http(customUrl.rongchuang + '/member/xcx/member/house/doSaveOwner', {
				data: {
					roomId, //	32	房间id	10200000000110803178
					identityType: 1, //	this.cardName,32	身份类型	1420200001
					memberRealname: name, //	32	真实姓名	张三
					memberMobile: phonenumber, //	32	电话	18610686713
					certificatesNumber: inputCardNum, //	32	证件号码	450219199909098899
					roomType: type, //	32	(房产类型 1新房 2二手房)	1
					certificatesType: cardNum //	32	证件类型	1420200001
				},
				method: 'GET'
			}).then(res => {
				if (res.success === true) {
					this.submitResult = true;
					this.modalOpts.msg = res.message;
					this.modalOpts.show = true;
				} else {
					this.modalOpts.msg = res.message;
					this.modalOpts.show = true;
				}
			});
		},

		/* 校验证件号码 */
		checkcardNum(inputCardNum, cardName) {
			if (cardName === '港澳通行证') {
				if (!filter_ga.test(inputCardNum)) this.inputCardNum = '';
			} else if (cardName === '身份证') {
				if (!filter_sfz.test(inputCardNum)) this.inputCardNum = '';
			} else if (cardName === '营业执照') {
				if (!filter_yyzz.test(inputCardNum)) this.inputCardNum = '';
			} else if (cardName === '护照') {
				if (!filter_hz.test(inputCardNum)) this.inputCardNum = '';
			} else if (cardName === '军官证') {
				if (!filter_jg.test(inputCardNum)) this.inputCardNum = '';
			} else if (inputCardNum === 0) {
				if (cardName.length > 20) this.name = '';
			}
		},
		/**  显示证件类型*/
		showCertificateModal() {
			this.showCertificate = true;
		},
		close() {
			this.showCertificate = false;
		},
		/**
		 * 弹窗方法
		 */
		modalConfirm() {
			this.modalOpts.show = false;
			if (this.submitResult) {
				uni.navigateBack({
					delta: 6,
					animationDuration: 200,
					animationType: 'pop-out'
				})
			}
		},
		//更改证件名称
		choosecertificate(item) {
			this.cardType = item;
			this.inputCardNum = '';
			this.showCertificate = false;
		}
	}
};
</script>

<style lang="less" scoped>
@import '../house.less';
.container {
	padding-bottom: 136rpx;
	.header {
		display: block;
		.title {
			margin-bottom: 24rpx;
		}
		.address {
			min-height: 40rpx;
			color: #66645d;
			line-height: 48rpx;
			font-size: 28rpx;
			margin-bottom: 32rpx;
		}
	}
	.tips {
		font-weight: bold;
		margin-top: 80rpx;
		margin-bottom: 24rpx;
	}
	.ray-cell-group {
		.ray-cell {
			display: block;
			.ray-cell__label {
				margin: 24rpx 0 48rpx 0;
				min-width: initial;
				display: inline-flex;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: space-between;
				&.tips {
					color: RGBA(246, 193, 102, 1);
					font-size: 26rpx;
					margin-bottom: 24rpx;
				}
				.icon_triangle {
					width: 0;
					height: 0;
					margin-bottom: -10rpx;
					border: 10rpx solid transparent;
					border-top-color: #f39800;
					margin-left: 12rpx;
				}
			}
			.ray-cell__value {
				text-align: left;
			}
			&::after {
				right: 28rpx;
			}
		}
	}
	.select-button {
		margin-top: 100rpx;
		.select-button_title {
			width: 100%;
			height: 30rpx;
			font-size: 44rpx;
			font-weight: bold;
			line-height: 30rpx;
			padding: 30rpx 0;
		}
		.select-button_button {
			display: flex;
			align-items: center;
			margin-top: 70rpx;

			.button {
				width: calc(50% - 26rpx);
				padding: 12rpx 80rpx;
				border-radius: 20rpx;
				text-align: center;
				border: solid 2rpx rgba(129, 129, 129, 1);
				font-size: 30rpx;
				color: rgba(129, 129, 129, 1);
				margin-right: 52rpx;
				&:last-child {
					margin-right: 0;
				}
				&.active {
					background: #ffe0b2;
					border-color: #f39800;
					color: #f39800;
				}
			}
		}
	}
	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 36rpx;
		background-color: #fff;
		padding: 12rpx 28rpx;
		.foot-button {
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 12rpx;
			background-color: #f39800;
			color: #fff;
			text-align: center;
			font-size: 34rpx;
		}
	}
}
.show-certificate-modal {
	width: 100%;
	height: 100%;
	z-index: 999;
	position: fixed;
	left: 0;
	top: 0;
	background: rgba(0, 0, 0, 0.6);
	.show-certificate-modal-con {
		width: 100%;
		border-top-left-radius: 12rpx;
		border-top-right-radius: 12rpx;
		background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		transform: translateY(100%);
		&.is-show {
			animation: modalMoveUp 0.5s;
			animation-fill-mode: forwards;
		}
		&.is-hide {
			animation: modalMoveDown 0.5s;
			animation-fill-mode: forwards;
		}
		@-webkit-keyframes modalMoveUp {
			0% {
				transform: translateY(100%);
			}
			100% {
				transform: translateY(0);
			}
		}
		@keyframes modalMoveUp {
			0% {
				transform: translateY(100%);
			}
			100% {
				transform: translateY(0);
			}
		}
		@-webkit-keyframes modalMoveDown {
			0% {
				transform: translateY(0);
			}
			100% {
				transform: translateY(100%);
			}
		}
		@keyframes modalMoveDown {
			0% {
				transform: translateY(0);
			}
			100% {
				transform: translateY(100%);
			}
		}
		.show-certificate-modal-cont {
			padding: 30rpx 50rpx 0;
			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.text {
					font-size: 40rpx;
					font-weight: bold;
				}
				.close {
					position: relative;
					width: 30rpx;
					height: 30rpx;
					img {
						width: 24rpx;
						height: 24rpx;
					}
					// &::before,
					// &::after {
					// 	content: '';
					// 	position: absolute;
					// 	top: 0;
					// 	left: 50%;
					// 	width: 2rpx;
					// 	height: 100%;
					// 	background: black;
					// 	color: #8A8C8D;
					// }
					// &::before {
					// 	transform: translateX(-50%) rotate(45deg);
					// }
					// &::after {
					// 	transform: translateX(-50%) rotate(-45deg);
					// }
				}
			}
			.certificate-cont {
				padding: 20rpx 0;
				.certificate-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 32rpx 0;
					border-bottom: 1px solid #efefef;

					.certificate-name {
						font-size: 30rpx;
						color: #66645d;
					}
					.caret {
						width: 16rpx;
						height: 16rpx;
						border: solid #66645d;
						border-width: 4rpx 4rpx 0 0;
						border-radius: 2rpx;
						transform: rotate(45deg);
					}
				}
			}
		}
	}
}
</style>
